<template>
  <div>
    <img src="../assets/R-C.jpg">
    <div class="box"></div>
    <div class="box1"></div>
  </div>

</template>
<script type="text/javascript" src="../echat.js"/>
<script>

export default {
  data() {
    return {

    };
  },
  methods:{
    test(){
      //3.初始化实例对象 echarts.init(dom容器)
      const myChart = this.$echarts.init(document.querySelector(".box"));
      const option = {
        "series": [
          {
            "name": "外部刻度",
            "type": "gauge",
            "radius": "100%",
            "min": 0,
            "max": 100,
            "splitNumber": 10,
            "startAngle": 245,
            "endAngle": -65,
            "axisLine": {
              "roundCap": true,
              "lineStyle": {
                "width": 0,
                "opacity": 0,
                "color": [
                  [
                    0.19,
                    "#088AD5"
                  ],
                  [
                    1,
                    "#d9d9d9"
                  ]
                ]
              }
            },
            "axisLabel": {
              "show": false
            },
            "axisTick": {
              "show": true,
              "splitNumber": 7,
              "lineStyle": {
                "color": "auto",
                "width": 2
              },
              "length": 10
            },
            "splitLine": {
              "show": true,
              "length": 20,
              "distance": 9,
              "lineStyle": {
                "color": "auto",
                "width": 3
              }
            },
            "detail": {
              "show": false
            },
            "pointer": {
              "show": false
            }
          },
          {
            "name": "内部（环形）进度条",
            "type": "gauge",
            "radius": "70%",
            "z": 4,
            "startAngle": 245,
            "endAngle": -65,
            "axisLine": {
              "lineStyle": {
                "color": [
                  [
                    0.19,
                    "#088AD5"
                  ]
                ],
                "width": 18
              }
            },
            "axisLabel": {
              "show": false
            },
            "axisTick": {
              "show": false
            },
            "splitLine": {
              "show": false
            },
            "pointer": {
              "show": false
            },
            "title": {
              "show": true,
              "offsetCenter": [
                "0%",
                "20%"
              ],
              "fontSize": 16,
              "color": "#fff",
              "height": 26
            },
            "detail": {
              "show": true,
              "color": "#fff",
              "fontSize": 36,
              "offsetCenter": [
                "0%",
                "-10%"
              ]
            },
            "data": [
              {
                "name": 202306,
                "value": 20
              }
            ]
          },
          {
            "name": "内部（环形）进度条背景",
            "type": "gauge",
            "radius": "74%",
            "z": 3,
            "startAngle": 245,
            "endAngle": -65,
            "axisLine": {
              "lineStyle": {
                "color": [
                  [
                    1,
                    "rgba(8, 138, 213, 0.08)"
                  ]
                ],
                "width": 36
              }
            },
            "axisLabel": {
              "show": false
            },
            "axisTick": {
              "show": false
            },
            "splitLine": {
              "show": false
            },
            "detail": {
              "show": false
            }
          },
          {
            "type": "pie",
            "radius": [
              "0",
              "46%"
            ],
            "itemStyle": {
              "color": "#088AD5"
            },
            "labelLine": {
              "show": false
            },
            "hoverAnimation": false,
            "data": [
              1
            ]
          }
        ]
      }

      //5.将配置项设置给echarts实例对象，使用刚指定的配置项和数据显示图表。
      myChart.setOption(option);
    },
    test2(){

      const myChart = this.$echarts.init(document.querySelector(".box1"));

      // github: github.com/jackshawn/pics-by-echarts

      const /** 引用Cool_LYPMEN 模拟时钟修改汉字星期
       * 代码584-690为添加处
       */

      option = {
        tooltip: {
          // formatter: "{a}：{c}"
          backgroundColor: '#fff',
          borderColor: '#f60',
          borderWidth: '1px',
          textStyle: {
            color: '#333'
          },
          formatter: function(param) {
            var time = Math.floor(param.value);
            if(param.seriesIndex === 0){
              return '<em style="color:' + param.color + ';">当前小时:' + time + '</em>'
            }
            if(param.seriesIndex === 1){
              return '<em style="color:' + param.color + ';">当前星期:' + time + '</em>'
            }
            if(param.seriesIndex === 2){
              return '<em style="color:' + param.color + ';">当前月份:' + time + '</em>'
            }
            if(param.seriesIndex === 4){
              return '<em style="color:' + param.color + ';">当前小时:' + time + '</em>'
            }
            if(param.seriesIndex === 5){
              return '<em style="color:' + param.color + ';">当前分钟:' + time + '</em>'
            }
            if(param.seriesIndex === 6){
              return '<em style="color:' + param.color + ';">当前秒:' + time + '</em>'
            }
          }
        },
        // backgroundColor: "rgba(0,0,0,0.1)",
        series: [{ //小表盘24小时
          name: '小时',
          type: 'gauge',
          center: ['28%', '50%'], // 默认全局居中
          radius: '22%', //仪表盘半径
          min: 0,
          max: 24,
          startAngle: 90,
          endAngle: -269.9999,
          splitNumber: 24,
          animation: 0,
          pointer: { //仪表盘指针
            show: 1,
            length: '90%',
            width: 3
          },
          itemStyle: { //仪表盘指针样式
            normal: {
              color: '#00b0b0',
              shadowColor: 'rgba(0, 0, 0, 0.5)',
              shadowBlur: 10,
              shadowOffsetX: 2,
              shadowOffsetY: 2
            }
          },
          axisLine: { //仪表盘轴线样式
            lineStyle: {
              color: [
                [1, '#337ab7']
              ],
              width: 6
            }
          },
          splitLine: { //分割线样式
            length: 6,
            lineStyle: {
              width: 1
            }
          },
          axisTick: { //仪表盘刻度样式
            show: 0,
            splitNumber: 5, //分隔线之间分割的刻度数
            length: 5, //刻度线长
            lineStyle: {
              color: ['#ffffff']
            }
          },
          axisLabel: { //刻度标签
            show: 1,
            distance: 2, //标签与刻度线的距离
            textStyle: {
              color: '#0000ff'
            },
            formatter: function(t) {
              switch (t + '') {
                case '0':
                  return '';
                case '1':
                  return '';
                case '2':
                  return '';
                case '3':
                  return '3';
                case '4':
                  return '';
                case '5':
                  return '';
                case '6':
                  return '6';
                case '7':
                  return '';
                case '8':
                  return '';
                case '9':
                  return '9';
                case '10':
                  return '';
                case '11':
                  return '';
                case '12':
                  return '12';
                case '13':
                  return '';
                case '14':
                  return '';
                case '15':
                  return '15';
                case '16':
                  return '';
                case '17':
                  return '';
                case '18':
                  return '18';
                case '19':
                  return '';
                case '20':
                  return '';
                case '21':
                  return '21';
                case '22':
                  return '';
                case '23':
                  return '';
                case '24':
                  return '24';
              }
            }
          },
          title: { //仪表盘标题
            show: 1,
            offsetCenter: ['250%', '-250%'],
            textStyle: {
              color: '#333',
              fontSize: 24,
              fontWeight: 'bold'
            }
          },
          detail: { //仪表盘显示数据
            show: 0,
            formatter: '{value}',
            offsetCenter: [0, '60%']
          },
          data: [{
            name: '当前时间:\n'
          }]
        },{ ///////////////////////////////////////////////小表盘星期
          name: '星期',
          type: 'gauge',
          center: ['72%', '50%'], // 默认全局居中
          radius: '22%', //仪表盘半径
          min: 0,
          max: 7,
          startAngle: 90,
          endAngle: -269.9999,
          splitNumber: 7,
          animation: 0,
          pointer: { //仪表盘指针
            show: true,
            length: '80%',
            width: 3
          },
          itemStyle: { //仪表盘指针样式
            normal: {
              color: '#00b0b0',
              shadowColor: 'rgba(0, 0, 0, 0.5)',
              shadowBlur: 10,
              shadowOffsetX: 2,
              shadowOffsetY: 2
            }
          },
          axisLine: { //仪表盘轴线样式
            lineStyle: {
              color: [
                [0.07, 'rgba(192, 0, 0, 0.5)'],
                [0.21, 'rgba(0, 0, 192, 0.5)'],
                [0.35, 'rgba(0, 64, 192, 0.5)'],
                [0.50, 'rgba(0, 96, 192, 0.5)'],
                [0.64, 'rgba(0, 164, 192, 0.5)'],
                [0.78, 'rgba(0, 128, 64, 0.5)'],
                [0.93, 'rgba(192, 128, 0, 0.5)'],
                [1, 'rgba(192, 0, 0, 0.5)']
              ],
              width: 18
            }
          },
          splitLine: { //分割线样式
            show: 0,
            length: 18,
            lineStyle: {
              width: 1
            }
          },
          axisTick: {
            show: 0
          }, //仪表盘刻度样式
          axisLabel: { //刻度标签
            show: 1,
            distance: -15, //标签与刻度线的距离
            textStyle: {
              color: '#ffffff'
            },
            formatter: function(t) {
              return ''
              // switch (t + '') {
              //     case '0':
              //         return '7';
              //     case '1':
              //         return '1';
              //     case '2':
              //         return '2';
              //     case '3':
              //         return '3';
              //     case '4':
              //         return '4';
              //     case '5':
              //         return '5';
              //     case '6':
              //         return '6';
              //     case '0':
              //         return '{w0|星期日}';
              //     case '1':
              //         return '星期一';
              //     case '2':
              //         return '星期二';
              //     case '3':
              //         return '星期三';
              //     case '4':
              //         return '星期四';
              //     case '5':
              //         return '星期五';
              //     case '6':
              //         return '星期六';    //这里的汉字怎么随着这个圆的弧度显示而不是水平显示
              // }
            },
            // rich: {
            //     w0: {
            //         transtion: 'rotate(30deg)'
            //     }
            // }
          },
          title: {
            show: 0
          }, //仪表盘标题
          detail: {
            show: 0
          }, //仪表盘显示数据
          data: [{}],
          z: 0
        }, { ///////////////////////////////////////////////小表盘月
          name: '月份',
          type: 'gauge',
          center: ['50%', '72%'], // 默认全局居中
          radius: '22%', //仪表盘半径
          min: 0,
          max: 12,
          startAngle: 90,
          endAngle: -269.9999,
          splitNumber: 12,
          animation: 0,
          pointer: { //仪表盘指针
            show: 1,
            length: '90%',
            width: 3
          },
          itemStyle: { //仪表盘指针样式
            normal: {
              color: '#00b0b0',
              shadowColor: 'rgba(0, 0, 0, 0.5)',
              shadowBlur: 10,
              shadowOffsetX: 2,
              shadowOffsetY: 2
            }
          },
          axisLine: { //仪表盘轴线样式
            lineStyle: {
              color: [
                [1, '#337ab7']
              ],
              width: 6
            }
          },
          splitLine: { //分割线样式
            show: 1,
            length: 6,
            lineStyle: {
              width: 1
            }
          },
          axisTick: {
            show: 0
          }, //仪表盘刻度样式
          axisLabel: { //刻度标签
            show: 1,
            distance: 1, //标签与刻度线的距离
            textStyle: {
              color: '#0000ff',
              fontFamily: '宋体'
            },
            formatter: function(t) {
              switch (t + '') {
                case '2':
                  return '2';
                case '4':
                  return '4';
                case '6':
                  return '6';
                case '8':
                  return '8';
                case '10':
                  return '10';
                case '12':
                  return '12';
              }
            }
          },
          detail: {
            show: 0
          }, //仪表盘显示数据
          data: [{}]
        }, { ///////////////////////////////////////////////小表盘日
          type: 'gauge',
          center: ['50%', '72%'], // 默认全局居中
          radius: '22%', //仪表盘半径
          animation: 0,
          pointer: {
            width: 0
          }, //仪表盘指针
          axisLine: { //仪表盘轴线样式
            lineStyle: {
              show: 0,
              width: 0
            }
          },
          splitLine: {
            show: 0
          }, //分割线样式
          axisTick: {
            show: 0
          }, //仪表盘刻度样式
          axisLabel: {
            show: 0
          }, //刻度标签
          detail: { //仪表盘显示数据
            show: 1,
            formatter: function(e) {
              if (e < 10)
                e = '0' + e;
              return e;
            },
            offsetCenter: ['160%', 0],
            borderWidth: 2,
            borderColor: '#337ab7',
            backgroundColor: '#fff',
            height: 20,
            width: 28,
            textStyle: {
              color: '#f60',
              fontSize: 16,
              fontWeight: 'bold'
            },
          },
          data: [{}]
        }, { ///////////////////////////////////////////////大表盘时针
          name: '小时',
          type: 'gauge',
          radius: '90%', //仪表盘半径
          min: 0,
          max: 12,
          startAngle: 90,
          endAngle: -269.9999,
          splitNumber: 12,
          animation: 0,
          pointer: { //仪表盘指针
            length: '70%',
            width: 6
          },
          itemStyle: { //仪表盘指针样式
            normal: {
              color: '#109A39',
              shadowColor: 'rgba(0, 0, 0, 0.5)',
              shadowBlur: 10,
              shadowOffsetX: 2,
              shadowOffsetY: 2
            }
          },
          axisLine: { //仪表盘轴线样式
            show: 0,
            lineStyle: {
              color: [
                [1, '#337ab7']
              ],
              width: 10,
              shadowColor: 'rgba(0, 0, 0, 0.8)',
              shadowBlur: 12,
              shadowOffsetX: 3,
              shadowOffsetY: 3
            }
          },
          splitLine: { //分割线样式
            length: 10,
            lineStyle: {
              width: 2
            }
          },
          axisTick: { //仪表盘刻度样式
            show: true,
            splitNumber: 5, //分隔线之间分割的刻度数
            length: 5, //刻度线长
            lineStyle: {
              color: ['#ffffff']
            }
          },
          axisLabel: {
            show: 0
          }, //刻度标签
          title: {
            show: 0
          }, //仪表盘标题
          detail: {
            show: 0
          }, //仪表盘显示数据
          data: [{}]
        }, { ///////////////////////////////////////////////大表盘分针
          name: '分钟',
          type: 'gauge',
          radius: '90%', //仪表盘半径
          min: 0,
          max: 60,
          startAngle: 90,
          endAngle: -269.9999,
          splitNumber: 12,
          animation: 0,
          pointer: { //仪表盘指针
            length: '85%',
            width: 6
          },
          itemStyle: { //仪表盘指针样式
            normal: {
              color: '#ca8622',
              shadowColor: 'rgba(0, 0, 0, 0.5)',
              shadowBlur: 10,
              shadowOffsetX: 2,
              shadowOffsetY: 2
            }
          },
          axisLine: { //仪表盘轴线样式
            show: 0,
            lineStyle: {
              width: 0
            }
          },
          splitLine: { //分割线样式
            length: 10,
            lineStyle: {
              width: 2
            }
          },
          axisTick: { //仪表盘刻度样式
            show: true,
            splitNumber: 5, //分隔线之间分割的刻度数
            length: 5, //刻度线长
            lineStyle: {
              color: ['#ffffff']
            }
          },
          axisLabel: {
            show: 0
          }, //刻度标签
          title: {
            show: 0
          }, //仪表盘标题
          detail: {
            show: 0
          }, //仪表盘显示数据
          data: [{}]
        }, { ///////////////////////////////////////////////大表盘秒针
          name: '秒',
          type: 'gauge',
          radius: '90%', //仪表盘半径
          min: 0,
          max: 60,
          startAngle: 90,
          endAngle: -269.9999,
          splitNumber: 12,
          animation: 0,
          pointer: { //仪表盘指针
            show: true,
            length: '95%',
            width: 4
          },
          itemStyle: { //仪表盘指针样式
            normal: {
              color: '#00b0b0',
              shadowColor: 'rgba(0, 0, 0, 0.8)',
              shadowBlur: 10,
              shadowOffsetX: 4,
              shadowOffsetY: 4
            }
          },
          axisLine: { //仪表盘轴线样式
            lineStyle: {
              color: [
                [1, '#337ab7']
              ],
              width: 10
            }
          },
          splitLine: { //分割线样式
            length: 10,
            lineStyle: {
              width: 2
            }
          },
          axisTick: { //仪表盘刻度样式
            show: 1,
            splitNumber: 5, //分隔线之间分割的刻度数
            length: 5, //刻度线长
            lineStyle: {
              color: ['#fff']
            }
          },
          axisLabel: { //刻度标签
            show: 1,
            distance: 6, //标签与刻度线的距离
            textStyle: {
              fontWeight: 'bold',
              fontSize: 16
            },
            formatter: function(t) {
              switch (t + '') {
                case '0':
                  return '';
                case '5':
                  return '1';
                case '10':
                  return '2';
                case '15':
                  return '3';
                case '20':
                  return '4';
                case '25':
                  return '5';
                case '30':
                  return '6';
                case '35':
                  return '7';
                case '40':
                  return '8';
                case '45':
                  return '9';
                case '50':
                  return '10';
                case '55':
                  return '11';
                case '60':
                  return '12';
              }
            }
          },
          title: {
            show: 0
          }, //仪表盘标题
          detail: { //仪表盘显示数据
            show: 0,
            formatter: '{value}',
            offsetCenter: [0, '60%']
          },
          data: [{}]
        },
          { //////// 汉字星期标注
            name: '汉字星期',
            type: 'pie',
            hoverAnimation: false,
            center: ['72%', '50%'],
            radius: ['15%', '22.5%'],
            startAngle: 64.28,
            label: {
              normal: {
                show: false,
                position: 'inside'
              }
            },
            labelLine: {
              normal: {
                show: false
              }
            },
            markPoint: {
              symbolSize: 1,
              label: {
                normal: {
                  show: true,
                  formatter: function(t){
                    return t.name
                  }
                }
              },
              data: [
                {
                  name: '星期日',
                  x: '72%',
                  y: '41%'
                },
                {
                  name: '星期一',
                  x: '77.5%',
                  y: '44.5%',
                  label: {
                    normal: {
                      rotate: -51.42
                    }
                  }
                },
                {
                  name: '星期二',
                  x: '78.7%',
                  y: '52%',
                  label: {
                    normal: {
                      rotate: -102.84
                    }
                  }
                },
                {
                  name: '星期三',
                  x: '75%',
                  y: '58.5%',
                  label: {
                    normal: {
                      rotate: -154.28
                    }
                  }
                },
                {
                  name: '星期四',
                  x: '69%',
                  y: '58.5%',
                  label: {
                    normal: {
                      rotate: -205.7
                    }
                  }
                },
                {
                  name: '星期五',
                  x: '65.5%',
                  y: '52%',
                  label: {
                    normal: {
                      rotate: -257.12
                    }
                  }
                },
                {
                  name: '星期六',
                  x: '66.8%',
                  y: '44.2%',
                  label: {
                    normal: {
                      rotate: 51.46
                    }
                  }
                }
              ]
            },
            data: [
              {name: '星期日', value: 1},
              {name: '星期一', value: 1},
              {name: '星期二', value: 1},
              {name: '星期三', value: 1},
              {name: '星期四', value: 1},
              {name: '星期五', value: 1},
              {name: '星期六', value: 1},
            ],
            z: 1
          }
        ]
      };
      myChart.setOption(option);
      clearInterval(timeTicket);
      var timeTicket = setInterval(function() {
        var datetime = new Date();
        var year = datetime.getFullYear();
        var month = datetime.getMonth() + 1;
        var date = datetime.getDate();
        var h = datetime.getHours();
        var m = datetime.getMinutes();
        var s = datetime.getSeconds();
        var week = datetime.getDay();
        var ms = datetime.getMilliseconds();
        var minutes = m + s / 60;
        var hours_24 = h + m / 60;
        var hours_12;
        if (hours_24 > 12){
          hours_12 = hours_24 - 12;
        }
        else{
          hours_12 = hours_24;
        }
        var seconds = s + ms / 1000;
        var cur_mon = new Date(year, month, 0);
        var cur_mon_count = cur_mon.getDate(); //当前月份总天数
        var month = month + date / cur_mon_count;
        if (month > 12){
          month = month - 12;
        }
        var strmonth = datetime.getMonth() + 1;
        var str = year + "-" + checktime(strmonth) + "-" + checktime(date) + " "+ checktime(h) + ":" + checktime(m) + ":" + checktime(s);
        option.series[0].data[0].name = '当前时间:\n' + str;
        option.series[0].data[0].value = (hours_24).toFixed(2);
        option.series[1].data[0].value = (week).toFixed(0);
        option.series[2].data[0].value = (month).toFixed(2);
        option.series[3].data[0].value = (date).toFixed(0);
        option.series[4].data[0].value = (hours_12).toFixed(2);
        option.series[5].data[0].value = (minutes).toFixed(2);
        option.series[6].data[0].value = (seconds).toFixed(2);
        myChart.setOption(option, true);
      }, 100);
      function checktime(str){
        if(str < 10){
          return '0' + str;
        }
        return str;
      }

      myChart.setOption(option);
    }
  },
  mounted() {
    this.test()
    this.test2()
  }

};
</script>

<style>
.box{
  width: 600px;
  height: 600px;
  float: left;
  /*background-color: rgb(188, 227, 236);*/
}
.box1{
  width: 600px;
  height: 600px;
  float: left;
  /*float: right;*/
  /*background-color: rgb(188, 227, 236);*/
}
</style>
